<template>
  <div class="my-recommend">
    <div class="list" ref="recommendList" :style="{'--width': itemWidth, '--paddingBottom': paddingBottom}">
      <div class="item" v-for="(item, index) of elements" :key="index">
        <div class="item-image">
          <img v-if="item.url" :src="item.url" :title="item.name" :alt="item.name" />
          <div v-else class="empty">
            <i class="el-icon-picture" />
          </div>
        </div>
        <div class="item-other">
          <div class="item-name">{{item.name || ''}}</div>
          <div class="item-desc">
            <span class="item-price">{{item.price ? `￥${item.price}` : ''}}</span>
          <!-- <span class="item-count">500人付款</span> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      column: 2,
      itemWidth: 'calc(calc(100% / 2) - 2px)',
      paddingBottom: 'calc(calc(100% / 2) - 2px)'
    }
  },
  computed: {
    elements () {
      return this.data.elements || []
    },
    type () {
      return this.data.type || 'column2'
    }
  },
  created () {
    this.resetStyle(this.type)
  },
  methods: {
    resetStyle (type) {
      if (type === 'column1') {
        this.column = 1
        this.itemWidth = '100%'
        this.paddingBottom = '33%'
      } else if (type === 'column3') {
        this.column = 3
        this.itemWidth = 'calc(calc(100% / 3) - 2px)'
        this.paddingBottom = this.itemWidth
      } else if (type === 'column2') {
        this.column = 2
        this.itemWidth = 'calc(calc(100% / 2) - 2px)'
        this.paddingBottom = this.itemWidth
      }
    }
  }
}
</script>

<style lang="less" scoped>
.my-recommend {
  box-sizing: border-box;
  .list {
    // padding: 0 10px;
    // box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    --width: 48%;
    --paddingBottom: 48%;
    .item {
      background-color: #fff;
      width: var(--width);
      min-height: 0;
      padding-bottom: var(--paddingBottom);
      box-sizing: border-box;
      position: relative;
      // margin: 5px 0 0;
      .item-image {
        overflow: hidden;
        border-radius: 5px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item-other {
        position: absolute;
        left: 5px;
        right: 5px;
        bottom: 5px;
        display: flex;
        flex-flow: column nowrap;
        .item-name {
          box-sizing: border-box;
          padding-right: 5px;
          font-size: 12px;
          color: #333;
          line-height: 20px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .item-desc {
          .item-price {
            color: #f90;
            font-size: 14px;
          }
          .item-count {
            color: #9b9b9b;
            font-size: 12px;
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>